import React from 'react';
import { connect } from 'umi';
import { Tabs, Button } from 'antd';
import { sortable } from 'react-sortable';
import styles from './index.less';

class Item extends React.Component {
  render() {
    return <li {...this.props}>{this.props.children}</li>;
  }
}

const SortableItem = sortable(Item);

class App extends React.Component {
  state = {
    items: [
      'Gold',
      'Crimson',
      'Hotpink',
      'Blueviolet',
      'Cornflowerblue',
      'Skyblue',
      'Lightblue',
      'Aquamarine',
      'Burlywood',
    ],
  };

  onSortItems = (items) => {
    this.setState({
      items: items,
    });
  };

  render() {
    const { items } = this.state;
    let listItems = items.map((item, i) => {
      return (
        <SortableItem
          key={i}
          onSortItems={this.onSortItems}
          items={items}
          sortId={i}
        >
          {item}
        </SortableItem>
      );
    });

    return <ul className="sortable-list">{listItems}</ul>;
  }
}

export default connect(({ editorModel }) => ({
  editorModel,
}))(App);
